<template>
  <div class="containerHome">
    <div class="mainHead">
      <div class="mainLeft">
        <div class="headNav" v-loading="indexAccountDetailLoading">
          <div class="navTop">
            <h2>账户信息</h2>
            <span>上次登录时间 {{ accountDetailPojo.lastLoginTime }}</span>
          </div>
          <div class="headMsg">
            <div class="leMsg">
              <img :src="$store.state.userInfo.avatar" alt="" />
              <div class="headText">
                <h2>{{ $store.state.userInfo.username }}</h2>
                <!-- <div class="tips">
                  <div :key="index" v-for="(item, index) in accountDetailPojo.manageAreaList">
                    {{ item }}
                  </div>
                </div> -->
              </div>
            </div>
            <!-- <div class="riBtn" v-if="!(userInfo.userMaxRole == 1 || userInfo.userMaxRole == 2)" @click="gotoPush">待审批（{{
              accountDetailPojo.waitSize }}）</div> -->
          </div>
        </div>
        <div class="news">
          <div class="newsNav">
            <div class="label">党政新闻</div>
          </div>

          <div class="lunboBox">
            <img style="width: 100%;height: 581px;" src="../../assets/image/changdongzhenHomeBg.png" alt="">
            <!-- <el-carousel v-if="imageArr.length" trigger="click" :interval="5000" :height="userMaxRoleShow ? '350px' : '550px'">
              <el-carousel-item v-for="item in imageArr" :key="item">
                <div class="carouselBox">
                  <el-image :style="{ width: '100%', height: userMaxRoleShow ? '350px' : '550px' }" :src="item.img" fit="fill" />
                  <a v-if="item.articleType == 2" class="aaaaa" :style="{ width: '100%', height: userMaxRoleShow ? '350px' : '550px' }" :href="item.content" target="_blank"></a>
                  <div class="text">{{ item.title }}</div>
                </div>
              </el-carousel-item>
            </el-carousel> -->
          </div>
        </div>
      </div>
      <!-- <div class="mainRight" v-loading="indexAccountDetailLoading" v-if="userInfo.userMaxRole == 5 || userInfo.userMaxRole == 6 || userInfo.userMaxRole == 7 || userInfo.userMaxRole == 8">
        <div class="mainRightFlex">
          <h2>村/社区数据情况</h2>
          <div class="reportAll">
            <div class="item" v-if="userInfo.userMaxRole == 1 || userInfo.userMaxRole == 3 || userInfo.userMaxRole == 5 || userInfo.userMaxRole == 7 || userInfo.userMaxRole == 8">
              <div class="text2">村上报总数</div>
              <div class="text3">{{ accountDetailPojo.villageUploadSize }}</div>
            </div>
            <div class="item" v-if="userInfo.userMaxRole == 2 || userInfo.userMaxRole == 4 || userInfo.userMaxRole == 6 || userInfo.userMaxRole == 7 || userInfo.userMaxRole == 8">
              <div class="text2">社区上报总数</div>
              <div class="text3">{{ accountDetailPojo.communityUploadSize }}</div>
            </div>
            <div class="item" v-if="userInfo.userMaxRole == 1 || userInfo.userMaxRole == 3 || userInfo.userMaxRole == 5 || userInfo.userMaxRole == 7 || userInfo.userMaxRole == 8">
              <div class="text2">村报表公开数</div>
              <div class="text3">{{ accountDetailPojo.villagePublicSize }}</div>
            </div>
            <div class="item" v-if="userInfo.userMaxRole == 2 || userInfo.userMaxRole == 4 || userInfo.userMaxRole == 6 || userInfo.userMaxRole == 7 || userInfo.userMaxRole == 8">
              <div class="text2">社区报表公开数</div>
              <div class="text3">{{ accountDetailPojo.communityPublicSize }}</div>
            </div>
          </div>
          <div id="communityCake" class="communityCake" style="width: 100%; height: 318px"></div>
        </div>
      </div> -->
    </div>

    <!-- <div class="record" v-if="userInfo.userMaxRole == 7 || userInfo.userMaxRole == 8">
      <div class="le">
        <div class="navTitle">
          <h2>平台操作记录</h2>
          <span @click="platformRecordShow = !platformRecordShow">更多</span>
        </div>
        <div class="recordList scrollbar" v-loading="commandLogListLoading">
          <div class="recordItem" v-for="(item, index) in logList" :key="index">
            <div class="text1">
              <img :src="item.avatar" alt="" />
              <span>{{ item.username }}</span>
            </div>
            <div class="text2">{{ item.createTime }}</div>
            <div class="text3 line-1">{{ item.logContent }}</div>
          </div>
        </div>
      </div>
      <div class="le">
        <div class="navTitle">
          <h2>{{ formatDate(new Date(), 'yyyy年MM月dd日') }}-用户访问量（前七日）</h2>
          <span @click="openLineChartShow">更多</span>
        </div>
        <div id="subjectLine" style="width: 100%; height: 282px"></div>
      </div>
    </div> -->

    <!-- 用户访问折线图窗口 -->
    <!-- <el-dialog :close-on-click-modal="false" v-model="lineChartShow" width="1000px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">用户访问量</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="record recordDialog">
        <div class="le">
          <div class="navTitle">
            <h2>{{ optionMonth }}月-用户访问量</h2>
            <div class="pickBox">
              <div class="label">日期：</div>
              <div class="pickerTime">
                <div class="time">
                  <el-date-picker
                    ref="saveDateInput"
                    v-model="optionMonth"
                    value-format="YYYY-MM"
                    type="month"
                    :clearable="false"
                    :disabled-date="disabledDate"
                    @change="changeMonthTime"
                    placeholder="选择月份"
                  >
                  </el-date-picker>
                </div>
                <div class="datTime" @click="openDataPicker">
                  <p>{{ optionMonth }}</p>
                  <down theme="filled" size="22" fill="#333" />
                </div>
              </div>
            </div>
          </div>
          <div id="subjectCakeDialog" style="width: 950px; height: 420px"></div>
        </div>
      </div>
    </el-dialog> -->

    <!-- 平台操作记录 -->
    <!-- <el-dialog :close-on-click-modal="false" v-model="platformRecordShow" width="1000px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">平台操作记录</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="record recordDialog">
        <div class="le">
          <div class="recordList listDia scrollbar">
            <div class="recordItem" v-for="(item, index) in logList" :key="index">
              <div class="text1">
                <img :src="item.avatar" alt="" />
                <span>{{ item.username }}</span>
              </div>
              <div class="text2">{{ item.createTime }}</div>
              <div class="text3 line-1">{{ item.logContent }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { markRaw } from 'vue'
import { mapState } from 'vuex'

let optionCake = {
  tooltip: {
    trigger: 'item',
  },
  color: ['#91CC75', '#2C83E4'],
  legend: {
    itemHeight: 16,
    itemWidth: 16,
    itemGap: 60,
    textStyle: {
      fontSize: 16,
    },
    orient: 'vertical',
    bottom: 'bottom',
  },

  series: [
    {
      startAngle: 270,
      name: '村/社区数量',
      type: 'pie',
      center: ['50%', '46%'],
      radius: '80%',
      data: [
        { value: 1048, name: '村' },
        { value: 735, name: '社区' },
      ],
      label: {
        position: 'inner',
        fontSize: 14,
        formatter: '{c}',
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}
let optionLine = {
  tooltip: {
    trigger: 'axis',
  },
  colors: ['#FC6D8C', '#5DAAFC'],
  legend: {
    top: 'top',
  },

  grid: {
    top: '15%',
    left: '0',
    right: '0',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: ['50%', '50%'],
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  },
  yAxis: {
    type: 'value',
    scale: true,
  },

  series: [
    {
      name: '用户访问量',
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series',
      },
      data: [26120, 61382, 319231, 2334124, 234320, 331320, 313520, 4523432, 454342, 67845, 124233, 89786],
    },
  ],
}
let optionLine2 = {
  tooltip: {
    trigger: 'axis',
  },
  colors: ['#FC6D8C', '#5DAAFC'],
  legend: {
    top: 'top',
  },

  grid: {
    top: '15%',
    left: '0',
    right: '0',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: ['50%', '50%'],
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  },
  yAxis: {
    type: 'value',
    scale: true,
  },

  series: [
    {
      name: '用户访问量',
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series',
      },
      data: [26120, 61382, 319231, 2334124, 234320, 331320, 313520, 4523432, 454342, 67845, 124233, 89786],
    },
  ],
}
export default {
  name: "home",
  computed: {
    ...mapState(['isCollapse']),
  },
  watch: {
    isCollapse(newVal) {
      setTimeout(() => {
        this.chartLine.resize()
        this.chartCake.resize()
      }, 500)
    },
  },
  data() {
    return {
      userInfo: {},
      commandLogListLoading: false,
      userMaxRoleShow: true,
      logList: [],
      indexAccountDetailLoading: false,
      platformRecordShow: false,
      lineChartShow: false,
      passwordShow: false,
      chartCake: null,
      chartLine: null,
      chartLineDialog: null,
      optionCake,
      imageArr: [],
      optionMonth: '',
      accountDetailPojo: {},
      logPage: 1,
      logLimit: 100,
      disabledDate: (time) => {
        return time.getTime() > Date.now()
      },
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('dtUsersVo'))
    let uu = JSON.parse(localStorage.getItem('dtUsersVo'))
    this.indexAccountDetail()
    this.commandLogList(this.logLimit)
    this.findReqSize(1)
    this.findPartyPolicyNews()
    this.optionMonth = this.formatDate(new Date(), 'yyyy-MM')
    if (uu.userMaxRole == 1 || uu.userMaxRole == 2 || uu.userMaxRole == 3 || uu.userMaxRole == 4 || uu.userMaxRole == 5 || uu.userMaxRole == 6) {
      this.userMaxRoleShow = false
    } else {
      this.userMaxRoleShow = true
    }
  },

  beforeUnmount() {
    if (this.chartCake) {
      this.chartCake.clear() //清空图表
      this.chartCake.dispose() //释放图表组件
      this.chartCake = null
    }
    if (this.chartLine) {
      this.chartLine.clear() //清空图表
      this.chartLine.dispose() //释放图表组件
      this.chartLine = null
    }
    if (this.chartLineDialog) {
      this.chartLineDialog.clear() //清空图表
      this.chartLineDialog.dispose() //释放图表组件
      this.chartLineDialog = null
    }
  },
  methods: {
    openWindow(url) {
      window.open(url)
    },
    // 切换时间
    changeMonthTime(e) {
      this.optionMonth = e
      this.findReqSize(2)
    },
    //获取党政新闻列表
    findPartyPolicyNews() {
      this.$http
        .post('/axh/articleManage/findPartyPolicyNews', {
          page: 1,
          limit: 5,
        })
        .then((data) => {
          this.imageArr = data.result.partyPolicyNews
        })
    },
    // 查询统计图数据
    findReqSize(type) {
      let month = ''
      if (type == 2) {
        month = this.optionMonth
      }
      this.$http
        .post('/axh/findReqSizeLineReport', {
          type: type,
          month: month,
        })
        .then((res) => {
          let label = []
          let value = []
          if (res.result) {
            res.result.forEach((item) => {
              label.push(item.label)
              value.push(item.value)
            })

            if (type == 1) {
              optionLine.xAxis.data = label
              optionLine.series[0].data = value
              this.initLine()
            } else {
              optionLine2.xAxis.data = label
              optionLine2.series[0].data = value
              this.initLineDialog()
            }
          }
        })
    },
    commandLogList(limit) {
      this.commandLogListLoading = true
      this.$http
        .post('/axh/homePage/findDtUsersPlatformLog', {
          page: this.logPage,
          limit: limit,
        })
        .then((res) => {
          this.commandLogListLoading = false
          this.logList = res.result
        })
    },
    indexAccountDetail() {
      this.indexAccountDetailLoading = true
      this.$http.post('/axh/indexAccountDetail').then((res) => {
        this.indexAccountDetailLoading = false
        this.accountDetailPojo = res.result
        optionCake.series[0].data = []
        if (this.userInfo.userMaxRole == 2 || this.userInfo.userMaxRole == 4 || this.userInfo.userMaxRole == 6 || this.userInfo.userMaxRole == 7 || this.userInfo.userMaxRole == 8) {
          optionCake.series[0].data.push({
            value: res.result.communitySize,
            name: '社区',
          })
        }
        if (this.userInfo.userMaxRole == 1 || this.userInfo.userMaxRole == 3 || this.userInfo.userMaxRole == 5 || this.userInfo.userMaxRole == 7 || this.userInfo.userMaxRole == 8) {
          optionCake.series[0].data.push({
            value: res.result.villageSize,
            name: '村',
          })
        }

        this.initCake()
      })
    },
    // 打开data-picker时间框
    openDataPicker() {
      this.$refs.saveDateInput.focus()
    },
    async openLineChartShow() {
      this.lineChartShow = !this.lineChartShow
      await this.findReqSize(2)
      await this.initLineDialog()
    },
    // 加载饼图统计图
    initCake() {
      let chartDom = document.getElementById('communityCake')
      if (chartDom) {
        this.chartCake = markRaw(this.$echarts.init(chartDom))
        this.chartCake.setOption(optionCake)
        setTimeout(() => {
          window.onresize = () => {
            this.chartCake.resize()
          }
        }, 200)
      }
    },

    // 加载折线统计图
    initLine() {
      let chartDom = document.getElementById('subjectLine')
      if (chartDom) {
        this.chartLine = markRaw(this.$echarts.init(chartDom))
        this.chartLine.setOption(optionLine)
        setTimeout(() => {
          window.onresize = () => {
            this.chartLine.resize()
          }
        }, 200)
      }
    },
    // 加载折线统计图窗口
    initLineDialog() {
      let chartDom = document.getElementById('subjectCakeDialog')
      if (chartDom) {
        this.chartLineDialog = markRaw(this.$echarts.init(chartDom))
        this.chartLineDialog.setOption(optionLine2)
        setTimeout(() => {
          window.onresize = () => {
            this.chartLineDialog.resize()
          }
        }, 200)
      }
    },

    gotoPush() {
      // this.$router.push('')
    },
    // 获取天气
    getWeather() {
      this.$axios
        .get('https://www.tianqiapi.com/api/?version=v1&cityid=101190101')
        .then((reponse) => {
        })
        .catch(() => { })
    },
  },
}
</script>

<style lang="scss" scoped>
.containerHome {
  padding: 16px;
}

.mainHead {
  display: flex;
  margin-bottom: 20px;

  // height: 558px;
  // overflow: hidden;
  .mainLeft {
    flex: 8;
    margin-right: 20px;

    .headNav {
      min-height: 122px;
      border-radius: 2px;
      margin-bottom: 20px;
      background-color: $colorFFFFFF;

      .navTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        border-bottom: 1px solid #ededed;

        h2 {
          font-size: 18px;
          font-weight: bold;
        }

        span {
          font-size: 12px;
          color: $color9E9E9E;
        }
      }

      .headMsg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;

        .leMsg {
          display: flex;

          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 16px;
            object-fit: cover;
          }

          .headText {
            flex: 1;

            h2 {
              font-size: 16px;
              margin-bottom: 5px;
              line-height: 56px;
            }

            .tips {
              color: $color2C83E4;
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
              margin-right: 32px;

              div {
                padding: 2px 8px;
                background: #d8eaff;
                margin-right: 8px;
                margin-bottom: 6px;
              }
            }
          }
        }

        .riBtn {
          cursor: pointer;
          min-width: 143px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #2c83e4;
          box-shadow: 2px 2px 10px 0px rgba(18, 83, 155, 0.4);
          border-radius: 50px;
          color: $colorFFFFFF;
        }
      }
    }

    .news {
      background-color: $colorFFFFFF;

      .newsNav {
        padding: 8px 16px;
        display: flex;

        .label {
          font-size: 18px;
          font-weight: bold;
        }
      }

      .lunboBox {
        width: 100%;
        position: relative;
        height: 100%;

        .carouselBox {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;

          .aaaaa {
            position: absolute;
            bottom: 0;
            left: 0;
          }

          .text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 42px;
            background: rgba(153, 153, 153, 0.6);
            border-radius: 0px 0px 0px 0px;
            padding: 9px 16px;
            font-size: 16px;
            color: $colorFFFFFF;
          }
        }
      }
    }
  }

  .mainRight {
    flex: 2;
    width: 100%;
    background-color: $colorFFFFFF;
    display: flex;
    padding: 8px 16px;

    .mainRightFlex {
      width: 100%;

      h2 {
        font-size: 18px;
        font-weight: bold;
      }

      .reportAll {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;

        .item {
          width: 50%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          font-size: 18px;
          padding-top: 16px;

          .text2 {
            font-size: 15px;
            color: #9e9e9e;
          }

          .text3 {
            font-size: 26px;
          }
        }
      }
    }
  }
}

.record {
  display: flex;

  .le {
    flex: 1;
    width: 0;
    height: 336px;
    background-color: $bgColorFFFFFF;
    margin-right: 20px;
    border-radius: 2px;
    padding: 8px 16px;

    &:nth-child(2) {
      margin-right: 0;
    }

    .navTitle {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;

      h2 {
        font-size: 18px;
        font-weight: bold;
      }

      span {
        cursor: pointer;
        color: #2c83e4;
      }

      .pickBox {
        display: flex;
        align-items: center;
        position: absolute;
        top: -2px;
        right: 50px;

        .label {
          font-size: 18px;
          transform: translateY(1px);
        }

        .pickerTime {
          position: relative;
          display: flex;
          align-items: center;
          cursor: pointer;

          .time {
            cursor: pointer;
            opacity: 0;
            width: 100px;
          }

          .datTime {
            position: absolute;
            top: -2px;
            left: 0;
            font-size: 18px;
            font-weight: 400;
            display: flex;
            align-items: center;
            height: 38px;

            p {
              margin-right: 2px;
            }
          }
        }
      }
    }
  }
}

.recordList {
  height: 282px;
  overflow-x: hidden;
  overflow-y: auto;

  .recordItem {
    display: flex;
    align-items: center;
    color: $color999999;
    font-size: 14px;
    padding: 6px 0;
    margin-top: 8px;
    border-bottom: 1px solid #ededed;

    img {
      width: 32px;
      height: 32px;
      margin-right: 8px;
      border-radius: 50%;
    }

    .text1 {
      display: flex;
      flex: 3;
      width: 0;
      align-items: center;
    }

    .text2 {
      flex: 2;
      width: 0;
    }

    .text3 {
      flex: 5;
      width: 0;
    }
  }
}

.recordDialog {
  height: 482px;

  .le {
    margin-right: 0;
    padding: 8px 0;
    height: auto;

    .listDia {
      padding-right: 8px;
      height: 482px;
    }

    .pickBox {
      right: 0 !important;
      padding-right: 8px;
    }
  }
}</style>